import { useState } from "react";
import { Form, Button, Input, Divider } from "antd";
import "./index.css";
import { useNavigate } from "react-router-dom";

function Login(params) {
  const form = Form.useForm();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  function hanlderOnClick() {
    console.log(email, password);
    navigate("/home");
  }

  return (
    <div className="Login-container">
      <div className="left-container"></div>
      <div className="right-container">
        <div className="center-container">
          <Form layout="horizontal" ref={form}>
            <div className="title">Sign in</div>
            <div className="link-container">
              <Button shape="round" className="link-button QQ">
                <div className="qqIcon" />
                Continue with QQ
              </Button>
              <Button shape="round" className="link-button WeChat">
                <div className="wechartIncon" />
                Continue with WeChat
              </Button>
            </div>
            <Divider className="divider">OR</Divider>

            <Form.Item>
              <div className="email-container">
                <div className="email-label">User name or email address</div>
                <Input
                  className="email-input"
                  onBlur={(e) => {
                    setEmail(e.target.value);
                  }}
                ></Input>
              </div>
              <div className="password-container">
                <div className="password-label">Your password</div>
                <Input
                  className="password-input"
                  onBlur={(e) => {
                    setPassword(e.target.value);
                  }}
                ></Input>
              </div>

              <a className="forget-password" href="/reset">
                Forget your password?
              </a>
              <div className="subimit-button">
                <Button
                  shape="round"
                  className="login-button"
                  onClick={hanlderOnClick}
                >
                  Sign in
                </Button>
              </div>
              <div>
                Don't have an account? <a href="/register">Register</a>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default Login;
